<template>
	<view class="content font_family">
		<view class="header f_j" :style="{paddingTop:menuButtonInfo+'px'}">
<!--			<image class="icon" src="../../static/public/back_b.png" mode="" @click="back"></image>-->
			<view class="search f_z_b">
        <u-icon name="volume"></u-icon>
        跟团可以包含高端酒店费用哦
			</view>
		</view>
    <view class="box_title f f_z_b">
      <view class="left f_d">
        <text class="text">探索合作酒店</text>
      </view>
      <view class="right" @click="toHotelList">
        <text class="text">更多</text>
        <image class="icon" src="../../static/index/more.png" mode=""></image>
      </view>
    </view>
    <view @click="go('/pagesA/index_menu/whotel_d?id='+item.id)" v-for="item in waterfall_list" class="hotel"  >
      <image :src="item.image"></image>
      <view class="title">
        <view class="line1">
          <view>{{item.title}}</view>
          <view>{{item.score}}分</view>
        </view>
        <view class="line2">
          <view class="tag">
            <view  class="tag_new" v-for="item2 in item.lable_multiplejson">
			{{item2.time}}
			</view>

          </view>
          <view class="price">
            <text class="name">价格</text>
            <text class="money" style="color:#940707">￥{{item.price}}起</text>
          </view>
        </view>
      </view>
    </view>
    <view class="box_title f f_z_b">
      <view class="left f_d">
        <text class="text">服务团队</text>
      </view>
      <view class="right" @click="go('/pages/whotel/teamList')">
        <text class="text">更多</text>
        <image class="icon" src="../../static/index/more.png" mode=""></image>
      </view>
    </view>
    <!-- <view class="travel">
      <view class="travel-item" v-for="(item,index)  in guide_list" v-if="index <4"   @click="go_detaildy(item)" >
		<image class="icon" :src=item.images mode="" style="height:60px;width:60px;border-radius: 50%;"></image>
        <view class="title">{{item.title}}</view>
        <view class="intro">{{item.work_year}}</view>

      </view>
    </view> -->
	
	
	<scroll-view class="scroll_box" scroll-x="true">
				<view class="item" v-for="(item,index) in guide_list" :key="index"
					 @click="go_detaildy(item)">
					<view class="img_box">
						<image class="img" :src="item.images" mode="aspectFill" style="height:60px;width:60px;border-radius: 50%;">
						</image>
						<!-- 推荐tag -->
					<!-- 	<view class="tag f_zj">
							推荐
						</view> -->
					</view>
					<view class="title">
						{{item.title}}
					</view>
					<view class="title1">
						{{item.work_year}}
					</view>
					<!-- <view class="price">
						<text class="text1">￥</text>
						<text class="text2">{{item.price}}</text>
						<text class="text3">起</text>
					</view> -->
				</view>
				<!-- <view class="empty_top" v-if="hot_list.length==0">
					<u-empty text='没有数据啦~' icon="/static/public/kong.png">
					</u-empty>
				</view> -->
			</scroll-view>
			
			
			
    <view class="p-safe" style="height: 180rpx"></view>
    <TabBar :tabIndex="1" />
	</view>
</template>

<script>

	import { guide_list,guidedy_list } from "@/api/index.js"
	import { lists,whotellists } from '@/api/index_menu/index.js'
  import TabBar from "../../components/TabBar.vue";
	export default {
    components: {TabBar},
		data() {
			return {
				menuButtonInfo: 0,
				waterfall_list: [],
				// 请求参数
				query: {
					page: 1,
					type_id: '',
					search: ''
				},
				guide_list:[],
			};
		},
		computed: {

		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect().top
			// #endif
			// #ifdef H5
			this.menuButtonInfo = 20
			// #endif
			this.get_lists()
			this.get_guide_list()
		},
		onReachBottom() {

		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		watch: {
			city() {

				this.get_lists()
			},
		},
		methods: {
      toHotelList(){
        this.go('/pages/whotel/hotelList')
      },
			go(url) {
				uni.navigateTo({
					url
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取列表
			get_lists() {
				whotellists(this.query).then(res => {
					if (res.code == 1) {
                     this.waterfall_list = res.data.data.splice(0,2)
					}
				})
			},			
			toDetail(item) {
			  uni.navigateTo({
			      url: `/pages/whotel/hotelDetail?id=${item.id}`,
			  })
			},
			
			// 获取导游列表
			get_guide_list() {
				this.status = 'loading'
				guidedy_list(this.query_data).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.guide_list = [...this.guide_list, ...res.data.data]
							this.query_data.page += 1
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					}
				})
			},
			
			go_detaildy(item) {
				uni.navigateTo({
					url: '/pagesA/index_menu/guidedy_detail?id=' + item.id
				})
			}

		},
	}
</script>
<style>
page{
  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}
</style>
<style lang="scss" scoped>
	.content {
		background-color: #F8F9FC;
		padding:0  30rpx;

		.header {
			padding-left: 30rpx;

			.icon {
				width: 18rpx;
				height: 36rpx;
			}

			.search {
        position: relative;
				margin-left: 40rpx;
				align-items: center;
				width: 400rpx;
				height: 68rpx;
				background: white;
				border-radius: 20rpx;
				padding: 0rpx 26rpx;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        font-size: 24rpx;


			}
      .search::after{
        content: '';
        position: absolute;
        top: 100%;
        left: 20px;
        border-width: 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
      }
		}
.box_title {
  margin-top: 30rpx;
  .left {
    .text {
      font-weight: 400;
      font-size: 36rpx;
      color: #000000;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      z-index: 1;
    }

    .line {
      width: 100%;
      height: 14rpx;
      background: #FFE706;
      margin-top: -10rpx;
    }
  }

  .right {
    .text {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .icon {
      width: 11rpx;
      height: 19rpx;
      margin-left: 9rpx;
    }
  }
}
	}

  .travel{
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    &-item{
      width: 260rpx;
      height: 300rpx;
      background-color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 20rpx;
	  margin-left:10px;
      .title{
        margin-top: 10rpx;
		font-size: 30rpx;
      }
      .intro{
        margin-top: 5rpx;
        color: gray;
        font-size: 24rpx;
      }
    }
  }
  
  
  	.swiper {
  			margin-top: 32rpx;
  		}
  
  		.scroll_box {
  			margin-top: 30rpx;
  			width: 100%;
  			height: 100%;
  			white-space: nowrap;
			justify-content: space-between;
  
  			.item {
  				margin-right: 20rpx;
  				width: 200rpx;
  				background: #FFFFFF;
  				border-radius: 12rpx 12rpx 12rpx 12rpx;
  				overflow: hidden;
  				display: inline-block;
			   justify-content: center;
					align-items: center;
					text-align: center;
  				.img_box {
  					position: relative;
  
  					.img {
  						vertical-align: bottom;
  						width: 100%;
  						height: 200rpx;
  					}
  
  					.tag {
  						position: absolute;
  						right: 0;
  						top: 0;
  						width: 82rpx;
  						height: 33rpx;
  						background: #F87415;
  						border-radius: 0rpx 12rpx 0rpx 12rpx;
  						font-weight: 400;
  						font-size: 20rpx;
  						color: #FFFFFF;
  						line-height: 23rpx;
  						text-align: left;
  						font-style: normal;
  						text-transform: none;
  					}
  				}
  
  				.title {
  					padding: 2rpx 10rpx;
  					width: 100%;
  					overflow: hidden;
  					white-space: nowrap;
  					text-overflow: ellipsis;
					margin-top:10px;
  				}
				  .title1 {
					padding: 2rpx 10rpx;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-top:10px;
				  }
  				.price {
  					margin-top: 6rpx;
  					padding: 2rpx 10rpx;
  					margin-bottom: 20rpx;
  					font-family:  "Microsoft Yahei", sans-serif;
  					font-weight: 400;
  					font-size: 24rpx;
  					color: #000000;
  					line-height: 28rpx;
  					text-align: left;
  					font-style: normal;
  					text-transform: none;
  
  					.text1 {}
  
  					.text2 {
  						font-size: 32rpx
  					}
  
  					.text3 {
  						color: #999999;
  						margin-left: 8rpx;
  					}
  				}
  			}
  		}

</style>